import {AttrStrMap, UnitAttribute} from "../../../script/frame/dataSource/DataModel";
import Configer from "../../../script/frame/apiModel/config/Configer";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import MathUtil from "../../../script/frame/codeAdapter/MathUtil";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {ColorStr} from "../../../script/type/Type";
import {AttrSetting, ConfigKey} from "../../../script/constant/ConfigConstant";
import { CodeUtil } from "../../../script/frame/codeAdapter/CodeUtil";

interface IProp {
    attr: UnitAttribute;
    attrStrMaps: AttrStrMap[];
    attrSize: { w: number, h: number };
    width?: number;
    height?: number;
    color?: ColorStr;
    fontSize?: number;
    textAlign?: TextAlign;
    hideName?: boolean
}
interface IState {

}


export default class AttrShowBar extends React.Element<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
    }

    render = () => {

        const size = { w: this.props.width, h: this.props.height };

        const textAlign = this.props.textAlign ? this.props.textAlign : TextAlign.behind;

        let fontSize

        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const color = this.props.color;

        if (this.props.fontSize) {
            fontSize = this.props.fontSize
        } else {
            fontSize = 0.0166;
        }

        const rowSpace = 0.00212;


        const attrStrArr = this.props.attrStrMaps;

        const attrSize = { h: this.props.attrSize.h, w: this.props.attrSize.w }

        const valueSize = { h: this.props.attrSize.h, w: size.w - attrSize.w - 0.0001 }

        return <View   key={GuiKeys.attrShowBar} style={{ width: size.w, height: size.h }}>
            {
                attrStrArr.map(
                    (attrStrMap, index, array) => {
                        const key = attrStrMap.key;
                        let int = 0;
                        if (this.props.attr) {
                            const value = this.props.attr[key];
                            int = MathUtil.round(value);
                        }
                        const attrSetting = Configer.getConfig(ConfigKey.attrSetting);
                        const body = attrSetting[key] as AttrSetting|undefined;
                        let text = '';
                        let intValue = `${int}`;
                        if (body) {

                            if (this.props.hideName) {
                            } else{
                                text = text + body.name
                            }

                            const suffix = body?.suffix;
                            if (!CodeUtil.isNullOrZero(suffix)) {
                                intValue = intValue + suffix;
                            }
                        }



                        const marginT = attrStrMap.marginT ? rowSpace + attrStrMap.marginT : rowSpace;

                        return <View   key={`${GuiKeys.attrShowBarNormalAttrContent}|${index}`} style={{ marginT: marginT, width: size.w, height: size.h }}>
                            <View   key={`${GuiKeys.attrShowBarNormalAttrText}|${index}`} style={{ fontSize: fontSize,  width: attrSize.w, height: attrSize.h, color }}>{text}</View>
                            <View   key={`${GuiKeys.attrShowBarNormalAttrValue}|${index}`} style={{ fontSize: fontSize, width: valueSize.w, height: valueSize.h, color, fontAlign: textAlign }}>{intValue}</View>
                        </View>
                    }
                )
            }
        </View>
    }
}